<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">
    <link rel="stylesheet" href="../../../swipebox.css">
    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .popClass {
            height: 400px;
        }

        tr td:first-child {
            width: 100px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">隐患排查台账,风险巡查</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="地区名称">
                            <el-input placeholder="请输入" class="inputW" v-model="zone"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="primary" @click="exportData">导出</el-button>
                        </el-form-item>
                        重大风险
                        <el-tag color="red">
                            {{sumData[0].one}}
                        </el-tag>
                        较大风险
                        <el-tag color="orange">
                            {{sumData[0].two}}
                        </el-tag>
                        一般风险
                        <el-tag color="yellow">
                            {{sumData[0].three}}
                        </el-tag>
                        低风险
                        <el-tag color="blue">
                            {{sumData[0].four}}
                        </el-tag>
                    </el-form>
                </div>
                <template v-if="tableData">
                    <el-table :data="tableData" style="margin-bottom: 40px" :stripe="true" :border="true" size="mini"
                              style="width: 100%">
                        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                        <el-table-column prop="zone" label="地区名称"></el-table-column>
                        <el-table-column prop="one" label="重大风险"></el-table-column>
                        <el-table-column prop="two" label="较大风险"></el-table-column>
                        <el-table-column prop="three" label="一般风险"></el-table-column>
                        <el-table-column prop="four" label="低风险"></el-table-column>
                        <el-table-column label="操作" width="300px" align="center">
                            <template slot-scope="scope">
                                <el-button @click="showDetail(scope.row.zone)" round size="mini"
                                >查看企业
                                </el-button>
                                <!--                                icon="el-icon-share"-->
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <div class="page-footer">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>

                <el-dialog title="企业风险点统计" :visible.sync="detailFormVisible" :show-close="false">
                    <template v-if="DetailData">
                        <el-table :data="DetailData" style="margin-bottom: 40px" :stripe="true" :border="true"
                                  size="mini"
                                  style="width: 100%">
                            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                            <el-table-column prop="projectName" label="企业名称"></el-table-column>
                            <el-table-column prop="one" label="重大风险"></el-table-column>
                            <el-table-column prop="two" label="较大风险"></el-table-column>
                            <el-table-column prop="three" label="一般风险"></el-table-column>
                            <el-table-column prop="four" label="低风险"></el-table-column>
                        </el-table>
                    </template>
                    <div slot="footer" class="dialog-footer" style="margin-bottom: 30px">
                        <el-button @click="cancelDetail">确定</el-button>
                    </div>
                    <div class="page-footer" style="margin-top: 50px">
                        <el-pagination background layout="prev, pager, next" :pagesize="Dpagesize" :total="DtotalCount"
                                       :current-page.sync="Dpageno" @current-change="DonChangePage">
                        </el-pagination>
                    </div>

                </el-dialog>
            </el-col>
        </el-row>
        <el-row>
        </el-row>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery.swipebox.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    $(function ($) {
        $(".swipebox").swipebox();
    })
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            formLabelWidth: '120px',
            currentPage: 1,
            sumData: [],
            tableData: [],
            pagesize: 10,
            pageno: 1,
            totalCount: 0,
            projectNo: '',
            zone: '',
            CheckZone: '',
            editMod: false,
            DetailData: [],
            Dpagesize: 10,
            Dpageno: 1,
            DtotalCount: 0,
            detailFormVisible: false,
            pointData: [{Name: '所有', Id: -1}, {Name: '风险', Id: 0}, {Name: '设备', Id: 1}],
            flagData: [{Name: '所有', Id: -1}, {Name: '未巡检', Id: 0}, {Name: '已巡检', Id: 2}, {Name: '超时未巡检', Id: 3}]
        },
        created: function () {
            this.loadData();
        },
        methods: {
            cancelDetail() {
                this.detailFormVisible = false;
                this.DetailData = {};
            },
            showDetail(zone) {
                if (zone) {
                    this.CheckZone = zone;
                    this.detailFormVisible = true;
                    var param = {};
                    param.zone = zone;
                    param.pageno = this.Dpageno;
                    param.pagesize = this.Dpagesize;
                    HttpUtil.get('GovStatistics/getZoneByBusinessRisk', param).success((res) => {
                        vuePage.DetailData = res.data;
                        vuePage.DtotalCount = res.total;
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '未有详情！'
                    });
                }
            },
            editClick(row) {
                this.param = row;
                this.dialogFormVisible = true;
                this.editMod = true;
            },
            loadData: function () {
                var param = {};
                if (this.zone)
                    param.zone = this.zone;
                param.UserId = SiteConfig.account.id;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                HttpUtil.get('GovStatistics/getGovCheckRiskByZone', param).success((res) => {
                    vuePage.tableData = res.data;
                    vuePage.totalCount = res.total;
                });
                HttpUtil.get('GovStatistics/getGovCheckRiskByZoneSum').success((res) => {
                    vuePage.sumData = res.data;
                });
            },
            exportData() {
                HttpUtil.get('GovStatistics/ExportGovCheckRiskByZone').success((res) => {
                    this.$message.success('导出成功');
                    window.location = SiteConfig.webApiset + res.data;
                })
            },
            onChangePage(page) {
                this.pageno = page;
                this.loadData();
            },
            DonChangePage(page) {
                this.Dpageno = page;
                this.showDetail(this.CheckZone);
            },
            search: function () {
                this.pageno = 1;
                this.loadData();

            },
            onCheckbox: function (row) {
            },
        },

        mounted: function () {
            this.imageUrl = SiteConfig.webApiset;
        }
    });
</script>
</body>
</html>
